extends /layout

block declarations
    - additional_title      = lingua.music;
    - body_class            = 'appMusic';
    - use_angular           = true;
    - angular_app           = "musicApp";
    - angular_body_ctrl     = "musicCtrl";

block additional_css
    link(rel='stylesheet', href='/music/css/style.css')

block additional_scripts
    script(src="/core/js/plugins/angular/angular-ui/ui-bootstrap-tpls-0.11.0.js")
    script(src="/music/js/app.js")
    script(src="/music/js/remote.js")
    script(src="/core/js/plugins/jquery/jquery.slimscroll.min.js")
    script.
         $(function(){
             var isTouch = "ontouchstart" in document.documentElement;
             if(!isTouch){
                 $('#inner-playlist').slimScroll({
                     height: '100%',
                     wheelStep: 30,
                     scrollBy : '80px'
                 });
             }

             $('.trackview:first').css('paddingTop', '100px');
         });
block body
    header(ng-init="playlist.Visible = true", ng-class="{side: player.playlist.length > 0 && playlist.Visible}")
        h1.pull-left#show-playlist(ng-hide="playlist.Visible")
            i.right.angle.icon.pull-left(ng-click="playlist.Visible = true")
        .container
            .row
                .col-md-12
                    a.backlink(href="/") &#xe113;
                    h1.hidden-xs #{lingua.music}
                    div#view-select(ng-hide="!albums", ng-init="view = 'albums'")
                        .view-select(ng-click="view = 'albums'", ng-hide="view === 'albums'") Show Albums
                        .view-select(ng-click="view = 'tracks'", ng-hide="view === 'tracks'") Show Tracks
                    input#search.pull-right(ng-model="query", type="text", placeholder="Search", ng-show="albums")
    #playlist(ng-show="player.playlist.length > 0 && playlist.Visible", ng-cloak)
        #inner-playlist
            h2 Playlist
                i.left.angle.icon.pull-right(ng-click="playlist.Visible = false")

            ul
                li.album(draggable="true", ng-on-drag-over="$event.preventDefault()", ng-on-drop="onDrop($index)", ng-on-drag-begin="startDrag($index)" ng-repeat="album in player.playlist", ng-switch="album._type" ,ng-class="{current: player.current.itemIdx == $index}")
                        .img-wrapper
                            img(ng-src="{{album.posterURL}}", width="100%")
                        .album-wrapper
                            .album-info
                                span.album-title {{album.title}}
                                div.controls
                                    i.remove.circle.icon(ng-click="player.playlist.remove(album)")
                                    i.reorder.icon(ng-show="player.playlist.length > 1")
                                span.album-artist {{album.artist.name}}
                                span.album-year(ng-show="album.year !== 0") {{album.year}}
                            ol.tracks
                                li.track(ng-repeat="track in album.tracks", ng-class="{current: player.current.subItemIdx == $index}", ng-click="player.play($index, $parent.$index)")
                                    i.play.icon
                                    span.track-number {{track.order}}
                                    span.track-title {{track.title}}

    .container-fluid(ng-class="{bottom: player.playlist.length > 0}")
            section#library(mcjs-library, ng-class="{side: player.playlist.length > 0  && playlist.Visible}")
                div.pull-left.row-tracks(ng-repeat="album in albums | filter:query", ng-class="{rowtracks: view == 'tracks'}", ng-style="itemStyle")
                    .album-wrapper(mcjs-library-item, ng-mouseover="changeSelected(album)")
                        .thumbnail(ng-class="{current: focused == $index }", ng-click="player.playlist.add(album); playlist.Visible = true")
                            i.circular.inverted.edit.icon(ng-click="open(album); $event.stopPropagation();")
                            img(ng-src="{{album.posterURL}}")
                            .caption
                                p
                                    span.album-title {{album.title}}
                                    span.album-artist {{album.artist.name}}
                                    span.album-year(ng-show="album.year !== 0") {{album.year}}
                    ol.tracks(ng-show="view == 'tracks'")
                        li.track(mcjs-library-item, ng-repeat="track in album.tracks", ng-class="{current: player.current.itemIdx == $index}", ng-click="player.play(track, null)", style="position: relative;")
                            span.track-number {{track.order}}
                            span.track-title {{track.title}}

            h2.loading.col-xs-12(ng-show="!albums") #{lingua.loading}
                .progress-pie-chart(data-percent="{{serverMessage}}", ng-class="{gt50: serverMessage > 50}", ng-show="serverMessage > 0")
                    .ppc-progress
                        .ppc-progress-fill(style="-webkit-transform:rotate({{360*serverMessage/100}}deg); transform:rotate({{360*serverMessage/100}}deg);")
                    .ppc-percents
                        .pcc-percents-wrapper
                            span {{serverMessage}}%
                {{serverStatus}}
            h2.loading(ng-show="albums.result === 'none'") No data found, please check the music filepath

    #player.col-xs-12.col-md-12.col-lg-12(ng-show="player.playlist.length > 0 || player.single", ng-class="className", ng-cloak)
        #progressBar.ui.active.striped.progress(ng-click="player.seek()")
            span#progress.bar

        #playing-info.col-xs-12.col-md-5
            img.center-block.img-reponsive.hidden-xs(ng-src="{{player.currentAlbum.posterURL}}")
            .info
                span.album-artist {{player.currentAlbum.title}}
                span.album-track {{player.currentTrack.title}}

        div.nav
                i.control.backward.icon(ng-click="player.previous()")
                i.control.play.icon(ng-click="player.play()",ng-hide="player.playing")
                i.control.pause.icon(ng-click="player.pause()",ng-show="player.playing")
                i.control.forward.icon(ng-click="player.next()")
                i.control.fullscreen.icon(ng-click="fullscreen()")
                i.control.shuffle.icon(ng-click="player.shuffle()", ng-class="{active: player.random === true}")


    script(type="text/ng-template", id="editModal.html")
        .modal-header
            h1 Edit album
        .modal-body
            .form-horizontal
                .row
                    .form-group
                        label.col-md-3.col-md-offset-1 Thumbnail url path
                        input.col-md-7(type="text",name="thumbnail",ng-model="current.posterURL",required)
                    .form-group
                        label.col-md-3.col-md-offset-1 Album title
                        input.col-md-7(type="text",name="title",ng-model="current.title",required)
        .modal-footer
            input.btn(type="submit",value="Submit", ng-click="editItem()",required)
            button.btn(ng-click="$dismiss()") Cancel
